<style lang="less">
  @import './index.less';
</style>

<template>
  <div>
    <Card dis-hover>
      <Row>
        <i-col span="20" class="margin-bottom-5">
          <div id="searcher" v-show="!searchList" style="display:inline-flex">
              <Input class="margin-right-5" placeholder="产品名称" v-model="product_name" size="small" style="width: 200px"></Input>
              <Select v-model="searchTags" multiple filterable placeholder="产品类型" size="small" class="margin-right-5" style="min-width: 217px">
                <Option v-for="item in tagsList" :value="item" :key="item">{{ item }}</Option>
              </Select>
              <Button class="margin-right-5" type="primary" size="small" icon="ios-search" @click="search">搜索</Button>
              <Button class="margin-right-5" type="primary" size="small"  @click="showSearch" icon="arrow-up-b">收起</Button>
          </div>
          <div v-show="searchList">
            <Input placeholder="产品名称" size="small" style="width: 200px" v-model="product_name"></Input>
            <Button class="margin-right-5" type="primary" size="small" icon="ios-search" @click="search">搜索</Button>
            <Button type="primary" size="small" icon="arrow-down-b" @click="showSearch">高级搜索</Button>
          </div>
        </i-col>
        <i-col span="4">
          <Button @click="addHandle" size="small" type="primary" icon="plus" class="pull-right">增加</Button>
        </i-col>
      </Row>
      <Table :columns="columns1" :data="productList.data"></Table>
      <Page :current="currentPage" :total="productList.totalCount" :page-size="pageSize" show-total @on-change="changePage"></Page>
    </Card>
    <Modal title="添加产品信息" v-model="addModal" width="1000" @on-ok="submitCreate('addForm')" :loading="loading" @on-cancel="cancel('addForm')">
      <Row>
        <i-col span="16" offset="4">
          <Form ref="addForm" :model="addForm" :rules="ruleValidate" :label-width="80">
            <FormItem label="产品类型">
              <Select v-model="addFormTags" multiple filterable>
                <Option v-for="item in tagsList" :value="item" :key="item">{{ item }}</Option>
              </Select>
            </FormItem>
            <FormItem label="产品名称" prop="product_name">
                <Input v-model="addForm.product_name"></Input>
            </FormItem>
            <FormItem label="标准单价" prop="price">
                <Input v-model="addForm.price"></Input>
            </FormItem>
          </Form>
        </i-col>
      </Row>
    </Modal>
    <Modal title="修改产品信息" width="1000" v-model="modifyModal" ok-text="修改" @on-ok="submitModify('modifyForm')" @on-cancel="cancel('modifyForm')" :loading="loading">
      <Row>
        <i-col span="16" offset="4">
          <Form :model="modifyForm" ref="modifyForm" :rules="ruleValidate" :label-width="80">
            <FormItem label="产品类型">
              <Select v-model="modifyFormTags" multiple filterable>
                <Option v-for="item in tagsList" :value="item" :key="item">{{ item }}</Option>
              </Select>
            </FormItem>
            <FormItem label="产品名称" prop="product_name">
                <Input v-model="modifyForm.product_name"></Input>
            </FormItem>
            <FormItem label="产品单价" prop="price">
              <Input type="text" v-model="modifyForm.price"></Input>
            </FormItem>
          </Form>
        </i-col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import data from './data';
import addBtn from './component/access-add-button.vue';
import deleteBtn from './component/access-delete-button.vue';
import modifyBtn from './component/access-modify-button.vue';

export default {
  data() {
    const validePrice = (rule, value, callback) => {
        if(!Number.isInteger(+value)) {
           callback(new Error('请输入数字值'));
        }else {
          callback()
        }
    };
    return {
      tagsList: [],
      addModal:false,
      detailModal:false,
      detailForm:{},
      addFormTags: [],
      modifyFormTags: [],
      addForm:{
        org_id:'00001'
      },
      modifyModal:false,
      modifyForm:{
        org_id:'00001'
      },
      searchList:true,
      loading:true,
      productList:[],
      product_name:'',
      searchTags: [],
      searchTag: '',
      pageSize:15,
      currentPage:1,
      columns1:[
        {
          title:'序号',
          type:'index',
          width: 200,
          align:'center'
        },{
          title:'产品名称',
          key:'product_name',
          width: 200,
          align:'center'
        },{
          title:'产品类型',
          key:'tag',
          align:'center'
        },{
          title:'产品单价',
          key:'price',
          width: 200,
          align:'center'
        },{
          title: '操作',
          align: 'center',
          width: 200,
          render: (h, params) => {
              return h('div', [
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '详细信息'
                  }
                }, [h('Button', {
                  props: {
                    size: 'small',
                    icon: 'qr-scanner',
                    type: 'text'
                  },
                  on: {
                    click: () => {
                      this.showHandle(params.row);
                      // this.$router.push({
                      //   name:'product_product-mgt-detail',
                      //   query:params.row
                      // })
                    }
                  }
                })]),
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '编辑'
                  }
                }, [h(modifyBtn, {
                  on: {
                    modifyClick: () => {
                      this.modifyHandle(params.row);
                    }
                  }
                }
                )]),
                h('Tooltip', {
                  props: {
                    placement: 'top',
                    content: '删除'
                  }
                }, [h(deleteBtn, {
                  on: {
                    delclick: () => {
                      this.$Modal.confirm({
                        title: '确认',
                        content: '确认要删除【' + params.row.product_name + '】产品吗？',
                        onOk: () => {
                          this.deleteHandle(params.row.product_id);
                        }
                      });
                    }
                  }
                })])
              ]);
            }
        }
      ],
      ruleValidate:{
        product_name:[
          { required: true, message: '产品名称不能为空', trigger: 'change' }
        ],
        price:[
          { required: true, message: '产品单价不能为空', trigger: 'change'},
          { validator: validePrice , trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    getTags(){
      this.$http.get('/sale/saletags').then(res => {
        this.tagsList = res.data.returnValue[0].values
      })
    },

    getProductList() {
      this.$http.get('/sale/products/page?product_name='+this.product_name+'&tags='+this.searchTag+'&pageSize='+this.pageSize+'&currentPage='+this.currentPage).then((res) => {
        this.productList = res.data.returnValue
        this.productList.data.map(product => {
          product.tag = product.tag ? product.tag.replace(/\,/g, '、') : product.tag
          return product
        })
      })
    },
    addHandle() {
      this.getTags()
      this.addModal = true
    },
    submitCreate(name) {
      this.$refs[name].validate((valid) => {
        if(valid) {
          this.addForm.tag = this.addFormTags.join(',')
          this.$http.post('/sale/products',this.addForm).then((res) => {
            this.$Message.success(res.data.message)
            this.addModal = false
            this.addForm = {
              org_id:'00001'
            }
            this.getProductList()
          }).catch(() => {
            this.$Message.error('添加失败，请重试！')
          })
        }else {
          this.loading = false
            this.$nextTick(() => {
              this.loading = true
          })
        }
      })
    },
    modifyHandle(mes) {
      this.getTags()
      this.modifyForm.product_id = mes.product_id
      this.modifyForm.product_name = mes.product_name
      this.modifyForm.price = mes.price.toString()
      this.modifyFormTags = mes.tag.split('、')
      this.modifyModal = true
    },
    submitModify(name) {
      this.$refs[name].validate((valid) => {
        if(valid) {
          this.modifyForm.tag = this.modifyFormTags.join(',')
          this.$http.put('/sale/products',this.modifyForm).then((res) => {
            this.$Message.success(res.data.message)
            this.modifyModal = false
            this.getProductList()
          }).catch(() => {
            this.$Message.error('修改失败，请稍后再试！')
          })
        }else{
          this.loading = false
          this.$nextTick(() => {
            this.loading = true
          })
        }
      })
    },
    deleteHandle(id) {
      this.$http.delete('/sale/products/' + id).then((res) => {
        this.$Message.success(res.data.message)
        this.getProductList()
      }).catch(() => {
        this.$Message.error('删除失败，请重试！')
      })
    },
    cancel(name) {
      this.$refs[name].resetFields()
      this.addForm = {}
      this.modifyModal = false
    },
    search() {
      this.searchTag = this.searchTags.join(',')
      this.getProductList()
    },
    showHandle(info) {
      this.$router.push({
        name:'product_product-mgt-detail',
        query:info
      })
    },
    changePage(page) {
      this.currentPage = page
      this.getProductList()
    },
    showSearch() {
      this.searchList = !this.searchList
      this.product_name = ''
      this.searchTags = []
    }
  },
  components: {
    addBtn,
    deleteBtn,
    modifyBtn
  },
  mounted() {
    this.getTags()
    this.getProductList()
  }
}
</script>

